import { Fragment, type FC, type ReactElement } from 'react';
import { Rect } from 'react-content-loader/native';
import { contentX } from './header';

type ImagesProps = {
  y: number;
  total: number;
  imageSize: number;
}

const Images: FC<ImagesProps> = (props) => {
  const { imageSize: size, total, y } = props;
  const items = Array.from({ length: total });

  return (
    <Fragment>
      {items.map((_, i) => {
        return (
          <Rect
            key={i}
            y={y}
            rx={4}
            width={size}
            height={size}
            x={contentX + (size + 4) * i}
          />
        );
      })}
    </Fragment>
  );
}

export default Images;